<template>
    <div>
        <ep-main-layout>
            <div slot="left">
                <assemble-left-module-1 :data="leftModule1"></assemble-left-module-1>
                <assemble-left-module-2 :data="leftModule2"></assemble-left-module-2>

            </div>
            <div slot="center" style="margin-left:20px">
                <second-center :data="centerData" label1="产业集聚" :label2="'人力资源集聚\n指数'" label3="人才集聚" label4="剧组集聚" :table-data="jjzspopdata"></second-center>
            </div>
             <div slot="right" style="margin-left:20px">
                <module-title title="剧组集聚"></module-title>
                <div style="width:100%; height:290px" id="rightchart1"></div>
                <div style="width:100%; height:290px" id="rightchart2"></div>
<!--                <div style="width:100%; height:180px" id="rightchart3"></div>-->
<!--                <assemble-right-chart :data="rightChart1" id="assemble-right-chart1" class="mt20"></assemble-right-chart>-->
<!--                <assemble-right-chart :data="rightChart2" id="assemble-right-chart2" class="mt20"></assemble-right-chart>-->
<!--                <assemble-right-chart :data="rightChart3" id="assemble-right-chart3" class="mt20"></assemble-right-chart>-->
<!--                <assemble-right-chart :data="rightChart4" id="assemble-right-chart4" class="mt20"></assemble-right-chart>-->
               <div class="chartbox"></div>
               <module-title title="发展趋势"></module-title>
               <jjyc style="height:260px;margin-left:20px" :data="rightChart5"></jjyc>
            </div>
        </ep-main-layout>
    </div>
</template>
<script>
import SecondCenter from '../components/active/SecondCenter.vue'
import AssembleLeftModule1 from '../components/assemble/AssembleLeftModule1.vue'
import AssembleLeftModule2 from '../components/assemble/AssembleLeftModule2.vue'
import AssembleRightChart from '../components/assemble/AssembleRightChart.vue'
import EpMainLayout from '../components/EpMainLayout.vue'
import ModuleTitle from '../components/ModuleTitle.vue'
import Jjyc from '../components/Jjyc.vue'
import * as echarts from "echarts";
export default {
    components: { EpMainLayout, SecondCenter, AssembleLeftModule1, AssembleLeftModule2, ModuleTitle, AssembleRightChart,Jjyc },
    data() {
        return {
          //聚集指数的表格弹窗数据
            jjzspopdata:{
            title:'聚集指数：各指标实际得分*分类权重*指标权重累加',
            value:[
                {
                    type: '产业集聚',
                    name: '企业数',
                    flqz: '0.2',
                    zbqz: '0.1',
                    jzz: '80%',
                    jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '产业集聚',
                    name: '横店出品数',
                    flqz: '0.2',
                    zbqz: '0.5',
                    jzz: '80%',
                    jfgz: '基准值为去年同期值的百分比，当前值除以去年值小于基准值时：当前值*80/(去年值*基准值)；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '产业集聚',
                    name: '规上企业数',
                    flqz: '0.2',
                    zbqz: '0.2',
                    jzz: '80%',
                    jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '产业集聚',
                    name: '横店影院数',
                    flqz: '0.2',
                    zbqz: '0.1',
                    jzz: '80%',
                    jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '产业集聚',
                    name: '影视制作企业占比',
                    flqz: '0.2',
                    zbqz: '0.1',
                    jzz: '80%',
                    jfgz: '基准值为去年视制作企业占比值的百分比，影视制作企业占比小于去年占比乘以基准值时：当前值*80/（去年值*基准值）；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '剧组集聚',
                    name: '剧组数',
                    flqz: '0.4',
                    zbqz: '0.4',
                    jzz: '80%',
                    jfgz: '基准值为去年同期值的百分比，当前值除以去年值小于基准值时：当前值*80/(去年值*基准值)；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '剧组集聚',
                    name: '剧组人数',
                    flqz: '0.4',
                    zbqz: '0.3',
                    jzz: '80%',
                    jfgz: '基准值为去年同期值的百分比，当前值除以去年值小于基准值时：当前值*80/(去年值*基准值)；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '剧组集聚',
                    name: '内景使用饱和度',
                    flqz: '0.4',
                    zbqz: '0.1',
                    jzz: '80%',
                    jfgz: '基准值为去年平均使用饱和度的百分比，使用率在基准值乘以去年平均使用饱和度上下5%范围内的为满分，没低于或高于该范围1%减一分'
                },
                {
                    type: '剧组集聚',
                    name: '签约外景使用饱和度',
                    flqz: '0.4',
                    zbqz: '0.1',
                    jzz: '80%',
                    jfgz: '基准值为去年平均使用饱和度的百分比，使用率在基准值乘以去年平均使用饱和度上下5%范围内的为满分，没低于或高于该范围1%减一分'
                },
                {
                    type: '剧组集聚',
                    name: '摄影棚使用饱和度',
                    flqz: '0.4',
                    zbqz: '0.1',
                    jzz: '80%',
                    jfgz: '基准值为去年平均使用饱和度的百分比，使用率在基准值乘以去年平均使用饱和度上下5%范围内的为满分，没低于或高于该范围1%减一分'
                },
                {
                    type: '人力资源集聚',
                    name: '专业人才数',
                    flqz: '0.4',
                    zbqz: '0.2',
                    jzz: '80%',
                    jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '人力资源集聚',
                    name: '配套人员数',
                    flqz: '0.4',
                    zbqz: '0.2',
                    jzz: '80%',
                    jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '人力资源集聚',
                    name: '今年累计新增群演数',
                    flqz: '0.4',
                    zbqz: '0.4',
                    jzz: '80%',
                    jfgz: '基准值为去年同期到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
                },
                {
                    type: '人力资源集聚',
                    name: '人才流入流出数比值',
                    flqz: '0.4',
                    zbqz: '0.2',
                    jzz: '80%',
                    jfgz: '基准值为去年年度到达值的百分比，当前值除以去年值小于基准值时：当前值*80/去年值*基准值；大于基准每大1%加1分到100分为值'
                },

            ],
          },
            centerData: {
                rcqzhy: 0, rlzyhy: 81 , rcjg: '0', rcfzhj: '0',
            },
            leftModule1: {
                value1: '0',
                value2: '0',
                value3: '0',
                list1Total: '0%',
                list1: [{
                    name: '企业类型一',
                    value: 20
                },{
                    name: '企业类型二',
                    value: 30
                },{
                    name: '企业类型三',
                    value: 40
                },{
                    name: '企业类型四',
                    value: 10
                }],
                list2: [{
                    name: '企业类型一',
                    value: 50
                },{
                    name: '企业类型二',
                    value: 50
                },{
                    name: '企业类型三',
                    value: 50
                },{
                    name: '企业类型四',
                    value: 50
                }]
            },
            leftModule2: {
                value1: '30',
                value3: '30',
                qzyyrs:6144,
                qzyydata:[
                  {name:'一级',value:1000,percent:10},
                  {name:'二级',value:5000,percent:50},
                  {name:'三级',value:4000,percent:40},
                  {name:'四级',value:500,percent:5},
                  {name:'五级',value:500,percent:5}
                ],
                leftModule3: [{
                    name: '2018',
                    value1: 0,
                    value2: 0,
                },{
                    name: '2019',
                    value1: 0,
                    value2: 0,
                },{
                    name: '2020',
                    value1: 0,
                    value2: 0,
                },{
                    name: '2021',
                    value1: 0,
                    value2: 0,
                },{
                    name: '2022',
                    value1: 0,
                    value2: 0,
                }]
            },
            rightChart1: {
                color: {r: 8, g: 132, b: 255},
                title: '近6个月的剧组数：个',
                unit: '个',
                list: [{
                    name: '06',
                    value: 10
                },{
                    name: '07',
                    value: 30
                },{
                    name: '08',
                    value: 50
                },{
                    name: '09',
                    value: 30
                },{
                    name: '10',
                    value: 60
                }]
            },
            rightChart2: {
                color: {r: 100, g: 230, b: 226},
                title: '使用饱和度：%',
                unit: '%',
                list: [
                  {
                    name:'内景',value:[{
                      name: '03',
                      value: 20
                    },{
                      name: '04',
                      value: 30
                    },{
                      name: '05',
                      value: 40
                    },{
                      name: '06',
                      value: 50
                    },{
                      name: '07',
                      value: 60
                    }]},
                  {
                    name:'签约外景',value:[{
                      name: '03',
                      value: 36
                    },{
                      name: '04',
                      value: 46
                    },{
                      name: '05',
                      value: 32
                    },{
                      name: '06',
                      value: 25
                    },{
                      name: '07',
                      value: 45
                    }]},
                  {
                    name:'摄影棚',value:[{
                      name: '03',
                      value: 36
                    },{
                      name: '04',
                      value: 48
                    },{
                      name: '05',
                      value: 25
                    },{
                      name: '06',
                      value: 45
                    },{
                      name: '07',
                      value: 56
                    }]}
                ]
            },
            // rightChart3: {
            //     color: {r: 255, g: 160, b: 10},
            //     title: '近12个月的签约外景使用饱和度：%',
            //     unit: '%',
            //     list: [{
            //         name: '06',
            //         value: 0
            //     },{
            //         name: '07',
            //         value: 0
            //     },{
            //         name: '08',
            //         value: 0
            //     },{
            //         name: '09',
            //         value: 0
            //     },{
            //         name: '20',
            //         value: 0
            //     }]
            // },
            // rightChart4: {
            //     color: {r: 255, g: 214, b: 10},
            //     title: '近12个月的摄影棚使用饱和度：%',
            //     unit: '%',
            //     list: [{
            //         name: '06',
            //         value: 0
            //     },{
            //         name: '07',
            //         value: 0
            //     },{
            //         name: '08',
            //         value: 0
            //     },{
            //         name: '09',
            //         value: 0
            //     },{
            //         name: '20',
            //         value: 0
            //     }]
            // },
            rightChart5: {
            cyjjqs: [
                {
              name: '2018',
              value: 1215,
              value2: 26.21
            },{
              name: '2019',
              value: 1322,
              value2: 27.65
            },{
              name: '2020',
              value: 1412,
              value2: 7.28
            },{
              name: '2021',
              value: 1528,
              value2: 8.86
            },{
              name: '2022',
              value: 1400,
              value2: 7
            },
            ],
            rlzyjjqs: [
                {
              name: '2018',
              value: 2097,
              value2: 54001,
              value3: 2036,
            },{
              name: '2019',
              value: 2542,
              value2: 62580,
              value3: 2455,
            },{
              name: '2020',
              value: 3094,
              value2: 72923,
              value3: 2863,
            },{
              name: '2021',
              value: 3314,
              value2: 85883,
              value3: 3023,
            },{
              name: '2022',
              value: 4400,
              value2: 93000,
              value3: 4500,
            },
            ],
            jzjjqs: [{
              name: '2018',
              value: 270,
              value2: 3343880,

            },{
              name: '2019',
              value: 310,
              value2: 3645290,

            },{
              name: '2020',
              value: 367,
              value2: 3635869,

            },{
              name: '2021',
              value: 398,
              value2: 4050737,

            },{
              name: '2022',
              value: 240,
              value2: 3200000,
            },
            ]
          },

        }
    },
    mounted() {
      this.resetData()
        //this.showchart1('rightchart1',this.rightChart1)
        //this.showchart2('rightchart2',this.rightChart2)
        setInterval(() => {
            this.resetData()
            //this.showchart1('rightchart1',this.rightChart1)
            //this.showchart2('richtchart2',this.rightChart2)
        }, 1000*60);
    },
    methods: {
        resetData() {

            let params = {
            };
            let url ='/dyrl/screen/query/jjzs'
            //let url='/jhApi/dsb/getSa02';
            console.log('调用接口');
             this.$api.commonPost(url,params).then(res=>{
                 console.log('获取数据',res);
                 console.log(res.data);
                 console.log("code:"+res.data.code);
                 if(res.data.code === 0){
                     console.log(res.data.result);
                     this.centerData=res.data.result.centerData;
                     this.leftModule1=res.data.result.leftModule1;
                     this.leftModule2 =res.data.result.leftModule2;
                     this.rightChart1 = res.data.result.rightChart1;
                     this.rightChart2 = res.data.result.rightChart2;
                     this.rightChart5 = res.data.result.rightChart5;

                 //     let bhdlist=[];
                 //     let njobj={};
                 //     njobj.name="内景"
                 //     njobj.value=res.data.result.rightChart2.list
                 //     bhdlist.push(njobj);
                 //     let wjobj={};
                 //     wjobj.name="签约外景"
                 //     wjobj.value=res.data.result.rightChart3.list
                 //     bhdlist.push(wjobj);
                 //     let syobj={};
                 //     syobj.name="摄影棚"
                 //     syobj.value=res.data.result.rightChart4.list
                 //     bhdlist.push(syobj);
                 //     this.rightChart2.list=bhdlist;
                 //     this.rightChart3 = res.data.result.rightChart3;
                 //     this.rightChart4 = res.data.result.rightChart4;
                 //     this.leftModule2.qzyyrs = 9643;
                 //     this.leftModule2.qzyydata =[
                 //     {name:'一级',value:69,percent:2},
                 //     {name:'二级',value:137,percent:3},
                 //     {name:'三级',value:421,percent:5},
                 //     {name:'四级',value:1032,percent:10},
                 //     {name:'五级',value:7984,percent:80}
                 // ]

                 }else{
                     console.log("error:");
                     this.$message({
                         type: 'error',
                         message: res.data.code,
                         duration: 1500
                     })
                 }

                 this.showchart1('rightchart1',this.rightChart1)
                 this.showchart2('rightchart2',this.rightChart2)
             })



             /*this.centerData = {
                rcqzhy: Math.floor(Math.random() * 80 + 20), rlzyhy: Math.floor(Math.random() * 80 + 20) , rcjg: Math.floor(Math.random() * 80 + 20), rcfzhj: Math.floor(Math.random() * 80 + 20),
            },*/
            /*this.leftModule1 =  {
                value1: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
                value3: Math.floor(Math.random() * 500 + 500),
                list1Total: Math.floor(Math.random() * 80 + 20) + "%",
                list1: [{
                    name: '企业类型一',
                    value: 20
                },{
                    name: '企业类型二',
                    value: 30
                },{
                    name: '企业类型三',
                    value: 40
                },{
                    name: '企业类型四',
                    value: 10
                }],
                list2: [{
                    name: '企业类型一',
                    value: 50
                },{
                    name: '企业类型二',
                    value: 50
                },{
                    name: '企业类型三',
                    value: 50
                },{
                    name: '企业类型四',
                    value: 50
                }]
            },
            this.leftModule2 = {
                value1: Math.floor(Math.random() * 80 + 20),value2: Math.floor(Math.random() * 80 + 20),
                value3: Math.floor(Math.random() * 80 + 20),value4: Math.floor(Math.random() * 80 + 20),
                qzyyrs:6145,
                qzyydata:[
                  {name:'一级',value:1000,percent:10},
                  {name:'二级',value:5000,percent:50},
                  {name:'三级',value:4000,percent:40},
                  {name:'四级',value:500,percent:5},
                  {name:'五级',value:500,percent:5}
                ],
                leftModule3: [{
                    name: '2018',
                    value1: Math.floor(Math.random() * 500 + 500),
                    value2: Math.floor(Math.random() * 500 + 500),
                },{
                    name: '2019',
                    value1: Math.floor(Math.random() * 500 + 500),
                    value2: Math.floor(Math.random() * 500 + 500),
                },{
                    name: '2020',
                    value1: Math.floor(Math.random() * 500 + 500),
                    value2: Math.floor(Math.random() * 500 + 500),
                },{
                    name: '2021',
                    value1: Math.floor(Math.random() * 500 + 500),
                    value2: Math.floor(Math.random() * 500 + 500),
                },{
                    name: '2022',
                    value1: Math.floor(Math.random() * 500 + 500),
                    value2: Math.floor(Math.random() * 500 + 500),
                }]
            },
            this.rightChart1 = {
                color: {r: 8, g: 132, b: 255},
                title: '近6个月的剧组数：个',
                unit: '个',
                list: [{
                    name: '06',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '07',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '08',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '09',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '20',
                    value: Math.floor(Math.random() * 500 + 500)
                }]
            },
             this.rightChart2= {
            color: {r: 100, g: 230, b: 226},
            title: '使用饱和度：%',
                unit: '%',
                list: [
              {
                name:'内景',value:[{
                  name: '06',
                  value: 20
                },{
                  name: '07',
                  value: 30
                },{
                  name: '08',
                  value: 40
                },{
                  name: '09',
                  value: 50
                },{
                  name: '20',
                  value: 60
                }]},
              {
                name:'签约外景',value:[{
                  name: '06',
                  value: 36
                },{
                  name: '07',
                  value: 46
                },{
                  name: '08',
                  value: 32
                },{
                  name: '09',
                  value: 25
                },{
                  name: '20',
                  value: 45
                }]},
              {
                name:'摄影棚',value:[{
                  name: '06',
                  value: 36
                },{
                  name: '07',
                  value: 48
                },{
                  name: '08',
                  value: 25
                },{
                  name: '09',
                  value: 45
                },{
                  name: '20',
                  value: 56
                }]}
            ]
          },
            this.rightChart3 = {
                color: {r: 255, g: 160, b: 10},
                title: '近12个月的签约外景使用饱和度：%',
                unit: '%',
                list: [{
                    name: '06',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '07',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '08',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '09',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '20',
                    value: Math.floor(Math.random() * 500 + 500)
                }]
            },
            this.rightChart4 = {
                color: {r: 255, g: 214, b: 10},
                title: '近12个月的摄影棚使用饱和度：%',
                unit: '%',
                list: [{
                    name: '06',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '07',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '08',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '09',
                    value: Math.floor(Math.random() * 500 + 500)
                },{
                    name: '20',
                    value: Math.floor(Math.random() * 500 + 500)
                }]
            }*/
        },
       showchart1(id,data){
        let serie = {
          type: 'pictorialBar',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        }
        let option= {
         tooltip: {
           borderWidth: 1,
           borderColor: 'rgba(8,132,255,0.4)',
           backgroundColor: 'rgba(2,32,61,0.72)',
           trigger: 'axis',
           formatter: function(params) {
             console.log(params)
             let child = '';
             for(let i = 0; i < params.length; i++) {
               child += `<div style="display:flex;align-items:center;color:#FFF;font-size:16px;padding:8px 0">
                        <div style="width:8px;height:8px;background:${typeof(params[i].color) == 'string' ? params[i].color: params[i].color.colorStops[0].color};"></div>
                        <div style="padding-left:8px">${params[i].name}月剧组数：</div>
                        <div style="color:#64E6E2;padding:0 4px">${params[i].data}个</div>
                        </div>`
             }
             return child;

           }
         },
          title: {
            text: data.title,
            left: 20,
            top: 15,
            textStyle: {
              color: '#FFF',
              fontSize: 16
            }
          },
          legend: {
           show:0,
            icon: 'rect',
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              color: '#FFF',
              fontSize: 16
            },
            right: 20,
            top: 15
          },
          grid: {
            bottom: 45,
            top: 60,
            left: 58,
            right: 20
          },
          xAxis: {
            data: data.list.map(e => e.name),
            axisLabel: {
              color: '#FFF'
            },
            axisTick: {show: false},
            name: '月份',
            nameLocation: 'start',
            nameTextStyle: {
              color: '#FFF',
              lineHeight: 28,
              verticalAlign: "top",
            },

            axisLine: {
              show: false,
            },
            nameGap: 10
          },
          yAxis: [{

            splitNumber: 5,
            nameTextStyle: {
              color: '#FFF',
              fontSize: 16,
              padding: [0, 0, 0, 0]
            },
            axisLabel: {
              color: '#FFF'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255, 0.16)',
                type: 'dashed',
                dashOffset: 2
              }
            },
          }],
          series: [{
            name: data.title,
            data: data.list.map(e => e.value),
            yAxisIndex: 0,

            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 1, color: 'rgba(8,132,255,1)'
                }, {
                  offset: 0.2, color: 'rgba(8,132,255,0.5)'
                }, {
                  offset: 0, color: 'rgba(8,132,255,0)'
                }]
              }
            },
            label: {
              show: true,
              position: 'top',
              formatter: function(value) {
                return `{a|${value.data}}\n{dot| }`
              },
              rich: {
                dot: {
                  width: 4,
                  height: 4,
                  borderColor: '#0884FF',
                  align: 'center',
                  borderWidth: 1,
                  borderRadius: 2
                },
                a: {
                  color: 'white',
                  align: 'center',
                  padding: 2,
                  fontSize: 14
                }
              }
            },
            ...serie
          }
          // ,{
          //   name: '人才流出',
          //   barGap: '-30%',
          //   yAxisIndex: 0,
          //   data: this.data.map(e => e.value2),
          //   itemStyle: {
          //     color: {
          //       type: 'linear',
          //       x: 0, y: 0,
          //       x2: 0, y: 1,
          //       colorStops: [{
          //         offset: 1, color: 'rgba(255,160,10,1)'
          //       }, {
          //         offset: 0.2, color: 'rgba(255,160,10,0.5)'
          //       }, {
          //         offset: 0, color: 'rgba(255,160,10,0)'
          //       }]
          //     }
          //   },
          //   label: {
          //     show: true,
          //     position: 'top',
          //     formatter: function(value) {
          //       return `{a|${value.data}}\n{dot| }`
          //     },
          //     rich: {
          //       dot: {
          //         width: 4,
          //         height: 4,
          //         borderColor: '#FFA00A',
          //         align: 'center',
          //         borderWidth: 1,
          //         borderRadius: 2
          //       },
          //       a: {
          //         color: 'white',
          //         align: 'center',
          //         padding: 2,
          //         fontSize: 14
          //       }
          //     }
          //   },
          //   ...serie
          // }
          ]
        }
        let myChart = echarts.init(document.getElementById(id));
        myChart.setOption(option)
      },
       showchart2(id,data){
           console.log("showchart2========")
            console.log(data)
        let color = ['rgba(8,132,255', 'rgba(101,210,255',  'rgba(255,160,10']
        let option= {
          color: color,
          title: {
            text: data.title,
            left: 20,
            top: 15,
            textStyle: {
              color: '#FFF',
              fontSize: 16
            }
          },
          legend: {
            align: 'left',
            left: 'right',
            top: '10',
            icon: 'rect',
            itemWidth: 8,
            itemHeight: 8,
            data: data.list.map(item => item.name),
            textStyle: {
              color: 'rgba(255,255,255,.72)',
              fontSize: 16
            }
          },
          tooltip: {
            trigger: 'axis',
            borderWidth: 1,
            borderColor: 'rgba(8,132,255,0.4)',
            backgroundColor: 'rgba(2,32,61,0.72)',
            textStyle: {
              fontSize: 16,
              color: '#fff',
              fontStyle: 'normal',
              fontWeight: 'normal',
              align:'left'
            }
          },
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            fontSize: 12,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          },
          grid: [
            {
              left: '5%',
              right: '2%',
              top: '20%',
              bottom: '10%',
              containLabel: true
            }
          ],
          xAxis: {
            type: 'category',
            name: '月份',
            axisLabel: {
              color: '#FFF'
            },
            axisTick: {show: false},
            nameLocation: 'start',
            nameTextStyle: {
              color: '#FFF',
              lineHeight: 28,
              verticalAlign: '0',
              padding: [0, 0, -22, 0]
            },

            axisLine: {
              show: false,
            },
            nameGap: 10
          },
          yAxis: [{
            type: 'value',
            // name: data.title,
            // nameTextStyle: {
            //   color: 'rgba(255,255,255,1)',
            //   fontSize: 16
            // },
            splitNumber: 5,
            nameTextStyle: {
              color: '#FFF',
              fontSize: 16,
              padding: [0, 0, 0, 0]
            },
            axisLabel: {
              color: '#FFF'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255, 0.16)',
                type: 'dashed',
                dashOffset: 2
              }
            },
          }],
          series: data.list.map((item, index) => {
            return {
              name: item.name,
              type: 'line',
              itemStyle: {
                color: color[index] + ',1)'
              },
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: color[index] + ',.3)' // 0% 处的颜色
                    }, {
                      offset: 1, color: color[index] + ',0)' // 100% 处的颜色
                    }]
                  }
                }
              },
              data: item.value.map(itm => [itm.name, itm.value])
            }
          })
        }
        let myChart = echarts.init(document.getElementById(id));
        myChart.setOption(option)
      },
    }

}
</script>
<style lang="less" scoped>
.chartbox{

}
.mt20 {
    margin-top: 20px;
}
</style>
